<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        
        .nav{
            height: 72px;
            background-color:white;
            position: relative;
        }
        .nav-left{
            height: 72px;
            width: 484px;
            background-color:white;
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav-right{
            height: 72px;
            width: 190px;
            background-color:white;
            position: absolute;
            top: 0;
            right: 0;
        }
        .nav .nav-left ul{
            list-style: none;
        }
        .nav .nav-left ul li{
            float: left;
            width: 60px;
            line-height: 72px;
            font-size: 12px;
            text-align: center;
        }
        /* .nav .nav-right .btn1{
            position: absolute;
            top: 27px;
            left: 60px;
            background-color: white;
            font-size: 12px;
            border: none;
            outline: none;
        } */
        .nav .nav-right .btn2{
            position: absolute;
            top: 25px;
            right: 20px;
            background-color: rgb(78, 113, 242);
            font-size: 12px;
            border: 1px solid rgb(78, 113, 242);
            border-radius: 4px;
            width: 40px;
            height: 20px;
            color: white;
            outline: none;
        }
        .header{
            background:white url(images/baidulogo.png) no-repeat;
            background-size: 250px;
            height: 100px;
           background-position-x: center;
           background-position-y: center;
        }
        .search{
            padding: 0px;
            background-color: white;
            height: 40px;
            width: 600px;
            margin: 20px auto;
            position: relative;
            border: 1px solid black;
            border-radius: 12px;
            overflow: hidden;
            box-sizing: border-box;
        }
        .search .search-input{
            padding-left: 12px;
            width: 450px;
            height: 40px;
            background-color: white;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
            outline: none;
        }
        .search .search-btn{
            width: 100px;
            height: 40px;
            background-color: rgb(78, 110, 242);
            border: none;
            position: absolute;
            top: 0;
            right: 0;
            color: white;
            outline:none;
        }
        .search .search-photo{
            position: absolute;
            right: 100px;
            top: 0;
            width: 50px;
            height: 40px;
            background: white url(images/xiangji.png) no-repeat;
            background-size: 40px;
            background-position-y: center;
            background-position-x: center;
            border: none;
            outline:none;
        }
        .nav1{
            background-color:white;
            height: 1px;
            width: 600px;
            margin: 30px auto;
            position: relative;
        }
        .nav1 .nav1-left{
            width: 480px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 13px;
            line-height: 30px;
        }
        .nav1 .nav1-photo{
            width: 20px;
            height: 30px;
            position: absolute;
            right: 38px;
            top: 0;
            background: white url(images/huan.png) no-repeat;
            background-size: 20px;
            background-position-x: center;
            background-position-y: center;
        }
        .nav1 .nav1-right{
            width: 100px;
            height: 30px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 12px;
            line-height: 30px;
            text-align: right;
            color: gray;
        }
        .news{
            position: relative;
            width: 600px;
            height: 200px;
            margin: 0 auto;
        }
        .news table{
            width: 600px;
            line-height: 32px;
        }
        .number1{
            color: red;
        }
        .number2{
            color: orange;
        }
        .number3{
            color: yellow;
        }
        .hot{
            background:white url(images/hot.png) no-repeat;
            width: 24px;
            height: 19px;
            position: absolute;
            left: 262px;
            top: 9px;
            background-position-x: center;
            background-position-y: center;
            background-size: 21px;
        }
        .new{
            background:white url(images/new.png) no-repeat;
            width: 24px;
            height: 19px;
            position: absolute;
            left: 204px;
            top: 42px;
            background-position-x: center;
            background-position-y: center;
            background-size: 21px;
        }
       .bottom-nav{
           height: 50px;
           width: 100%;
           background-color:rgb(251, 251, 251);
           position: fixed;
           bottom: 0px;
       }
       .bottom-nav-left{
           height: 50px;
           width: 630px;
           background-color:rgb(251, 251, 251);
           position: absolute;
           top: 0;
           left: 0;
       }
       .bottom-nav-right{
           height: 50px;
           width: 680px;
           background-color: rgb(251, 251, 251);
           position: absolute;
           top: 0;
           right: 0;
           text-align: center;
        }
       .bottom-nav-left ul{
           list-style: none;
        }
        .bottom-nav-left ul li{
            float: left;
            line-height: 50px;
            width: 90px;
            font-size: 12px;
            text-align: center;
            color: gray;
        }
        .bottom-nav-word{
            display: inline-block;
            margin-right: 20px;
            font-size: 12px;
            color: gray;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        .QR-Code{
            width: 30px;
            height: 30px;
            border: 1px solid white;
            border-radius: 25px;
            position: fixed;
            bottom: 82px;
            right: 94px;
            background: rgb(251, 251, 251) url(images/code.png) no-repeat;
            background-position-x: center;
            background-position-y: center;
        }
        .drop-menu{
            width: 100px;
            height: 200px;
            position: absolute;
            top: 20px;
            right: 20px;
            display: none;
        }
        .btn1 ul{list-style: none;}
        li:hover{background-color: black;}
        .shezhi{
            
            position: relative;
        }
        .shezhi:hover .drop-menu{
            display: block;
        }
    </style>
</head>
<body>
    
    <div class="nav">
        <div class="nav-left">
            <ul>
                <li>新闻</li>
                <li>hao123</li>
                <li>地图</li>
                <li>视频</li>
                <li>贴吧</li>
                <li>学术</li>
                <li>更多</li>
            </ul>
        </div>
        <div class="nav-right">
            <div class="btn1">
            <ul>
                <li class="shezhi">设置</li>
                <div class="drop-menu">
                <p>搜索设置</p>
                <p>高级搜索</p>
                <p>关闭预测</p>
                <p>隐私设置</p>
                <p>关闭热榜</p>
                </div>
            </ul>
            </div>
            </div>
            <button class="btn2">登录</button>
         
        </div>
    </div>
    <div class="header"></div>
    <div class="search">
        <input type="text" class="search-input">
        <button class="search-photo"></button>
        <button class="search-btn">百度一下</button>
    </div>
    <div class="nav1">
        <span class="nav1-left">百度热搜</span>
        <span class="nav1-photo"></span>
        <span class="nav1-right">换一换</span>
    </div>
    <div class="news">
        <table>
            <tr>
                <td><span class="number1">1</span>&nbsp;&nbsp;院方否认青岛新增病例是院内感染</td>
                <td>4&nbsp;&nbsp;瑞幸咖啡被罚200万元</td>
            </tr>
            <tr>
                <td><span class="number2">2</span>&nbsp;&nbsp;2020诺贝尔经济学奖揭晓</td>
                <td>5&nbsp;&nbsp;青岛已排查密接132人</td>
            </tr>
            <tr>
                <td><span class="number3">3</span></span>&nbsp;&nbsp;外交部回应防弹少年团言论</td>
                <td>6&nbsp;&nbsp;湖人捧起总冠军奖杯致敬科比</td>
            </tr>
        </table>
        <div class="hot"></div>
        <div class="new"></div>
    </div>
   <div class="bottom-nav">
       <div class="bottom-nav-left">
           <ul>
               <li>设为首页</li>
               <li>关于百度</li>
               <li>About&nbsp;Baidu</li>
               <li>百度营销</li>
               <li>使用百度前必读</li>
               <li>意见反馈</li>
               <li>帮助中心</li>
           </ul>
       </div>
       <div class="bottom-nav-right">
           <div class="bottom-nav-word">©2020&nbsp;Baidu</div>
           <div class="bottom-nav-word">(京)-经营性-2017-0020</div>
           <div class="bottom-nav-word">京公网安备11000002000001号</div>
           <div class="bottom-nav-word">京ICP证030173号</div>
       </div>
   </div>
<div class="QR-Code"></div>

</body>
</html>